<template>
  <view class="custom-center-popup">
    <u-popup :show="show" :round="20" mode="center" :overlay="true" :closeable="true" :closeOnClickOverlay="false"
      @close="close">
      <view class="feature-menu">
        <view class="popup-title">
          功能页
        </view>
        <view class="menu-grid-box new" >
          <view class="menu-grid-box-item" v-for="menus in userMenusRun">
            <view class="menu-grid-box-item_title">
              {{menus.title}}
            </view>
            <view class="menu-grid-box-item_container">
              <!-- <view class="menu-item" v-for="(item,index) in menus.menus" :no="item.no" :class="{disabled:!item.authority}" -->
              <view class="menu-item" v-for="(item,index) in menus.menus" :no="item.no" :class="{disabled:!menuAuth[item.no]}"
                v-if="isShowMore ? index < 6 : index >0 " @click="toPages(item.target,item.name,item.subtitle)">
                <image class="menu-icon" :src="item.image" mode="aspectFit" v-if="item.image"></image>
                <view class="menu-icon" v-else>
                  <text :class="'cuIcon-'+item.icon"></text>
                </view>
                <view class="menu-name margin-top">
                  {{item.name}}
                </view>
              </view>
              <view class="menu-item" v-if="isShowMore(menus.menus)||menus.title==='报表管理'" @click="toMores(menus)">
                <image class="menu-icon" :src="morei" mode="aspectFit" v-if="morei"></image>
                <view class="menu-name margin-top">
                  {{'更多'}}
                </view>
              </view>
            </view>
          </view>
        </view>
  <!--      <view class="menu-grid-box" v-if="newView!==true">
          <view class="menu-grid">
            <view class="menu-item" v-for="item in menus" :class="{disabled:!item.target}"
              @click="toPages(item.target)">
              <image class="menu-icon" :src="item.image" mode="aspectFit" v-if="item.image"></image>
              <view class="menu-icon" v-else>
                <text :class="'cuIcon-'+item.icon"></text>
              </view>
              <view class="menu-name margin-top">
                {{item.name}}
              </view>
            </view>
          </view>
        </view> -->
      </view>
    </u-popup>
  </view>
</template>

<script>
  /**
   * 功能菜单
   */
  let moreIcon = require('@/static/icons/more.png');
  const gridList = [{
      title: '功能菜单',
      menus: [{
          name: "收银",
          image: "/static/icons/sy.png",
          target: "/pages/main/cash/cash",
          no: 'bxretail_aio_cashier',
        },
        {
          name: "销售管理",
          image: "/static/icons/xsgl.png",
          target: "/pages/main/orderList/orderList?srv=srvretail_store_order_select&pageType=listAndDetail&&listLayout=listAndDetail",
          no: 'bxretail_aio_sale_manage'
        },
        {
          name: "会员管理",
          image: "/static/icons/hygl.png",
          target: "/pages/main/memberMge/memberMge?srv=srvretail_member_info_select&pageType=listAndDetail",
          no: "bxretail_aio_member_manage"
        },
        {
          name: "商品管理",
          image: "/static/icons/spgl.png",
          target: "/pages/main/goodsManage/goodsManage",
          no: "bxretail_aio_goods_manage"
        },
        {
          name: "设置",
          image: "/static/icons/sz.png",
          target: "/pages/main/setup/menu",
          no: "bxretail_aio_setup"
        },
        {
          name: "退货模式",
          image: "/static/icons/tkms.png",
          target: "/pages/main/cash/cash?mode=退货",
          no: "bxretail_aio_refund_model"
        },
      ]
    },
    {
      title: '库存管理',
      menus: [{
          name: "快速入库",
          image: "/static/icons/kcgl/ksrk.png",
          target: "/pages/main/quickInStock/quickInStock?srv=srvretail_warehousing_aio_select&updateSrv=srvretail_warehousing_update&pageType=add&listLayout=listAndFilter",
          no: "bxretail_aio_warehousing"
        },
        {
          name: "快速出库",
          image: "/static/icons/kcgl/ksck.png",
          target: "/pages/main/quickUpStcok/quickUpStcok?srv=srvretail_issue_select&pageType=add&listLayout=listAndFilter",
          no: "bxretail_aio_issue"
        },
        {
          name: "盘点",
          image: "/static/icons/kcgl/pd.png",
          target: "/pages/main/stockCheckOff/stockCheckOff?srv=srvretail_inventory_select&pageType=add&listLayout=listAndFilter",
          no: "bxretail_aio_inventory"
        },
        {
          name: "报损",
          image: "/static/icons/kcgl/bs.png",
          target: "/pages/main/submittedLoss/submittedLoss?srv=srvretail_loss_reporting_select&pageType=add&listLayout=listAndFilter",
          no: "bxretail_aio_loss_reporting"
        },
        {
          name: "库存预警",
          image: "/static/icons/kcgl/kcyj.png",
          target: "/pages/main/inventoryAlert/inventoryAlert",
          no: "bxretail_aio_early_warning"
        },
        {
          name: "库存查询",
          image: "/static/icons/kcgl/kccx.png",
          target: "/pages/main/storeSearch/storeSearch",
          no: "bxretail_aio_stock_info"
        },
      ]
    },
    {
      title: '报表管理',
      menus: [{
          name: "流水明细",
          image: "/static/icons/bbgl/jymx.png",
          target: "/pages/main/report/overview?serviceName=srvretail_flow_details_select&type=overview",
          no: "bxretail_aio_management_report"
        },
        {
          name: "出入库报表",
          subtitle: "出入库明细",
          image: "/static/icons/bbgl/crk.png",
          target: "/pages/main/report/overview?serviceName=srvretail_in_out_stock_select",
          no: "bxretail_aio_in_out_stock"
        },
        {
          name: "营业概况",
          image: "/static/icons/bbgl/yygk.png",
          target: "/pages/main/report/overview?serviceName=srvretail_business_overview_select&type=overview",
          no: "bxretail_aio_business_overview"
        },
        {
          name: "积分记录",
          image: "/static/icons/bbgl/jfjl.png",
          target: "/pages/main/report/vip?serviceName=srvretail_member_report_points_select&type=vip",
          no: "bxretail_aio_integral_record"
        },
        {
          name: "储值记录",
          image: "/static/icons/bbgl/hycz.png",
          target: "/pages/main/report/vip?serviceName=srvretail_member_report_recharge_select&type=vip",
          no: "bxretail_aio_tored_record"
        },
        // {
        //   name: "库存报表",
        //   image: "/static/icons/bbgl/hycz.png",
        //   target: "/pages/main/report/vip?serviceName=srvretail_in_out_stock_select",
        //   no: "bxretail_aio_member_report"
        // },
      ]
    },
    {
      title: '营销管理',
      menus: [{
          name: "促销活动",
          image: "/static/icons/cxhd.png",
          target: "/pages/main/activities/activities",
          no: "bxretail_aio_promotion_manage"
        },
        {
          name: "优惠券",
          image: "/static/icons/yhq.png",
          target: "/pages/main/coupon/coupon",
          no: "bxretail_aio_coupon_manage"
        }
      ]
    }
  ]

  export default {
    name: "feature-menus",
    data() {
      return {
        gridList: gridList,
        morei: moreIcon,
        show: false,
        menus: gridList,
      }
    },
    computed: {
      userMenusRun: function() {
        // let menus = this.$userMenu || uni.getStorageSync('user_menu') || []
        let configMenus = this.deepClone(this.menus)
        // for (let menu of configMenus) {
        //   for (let m of menu.menus) {
        //     m['authority'] = false
        //     for (let um of menus) {
        //       if (m.no == um.fk_menu_no) {
        //         m['authority'] = true
        //       }
        //     }
        //   }
        // }
        return configMenus
      }
    },
    methods: {
      getUserMenusRun: function() {
        uni.showLoading({
          title: '加载中',
          mask: false
        })
        let menus = uni.getStorageSync('user_menu') || []
        let configMenus = this.deepClone(this.menus)
        for (let menu of configMenus) {
          for (let m of menu.menus) {
            // this.$set(m,'authority',false)
            m['authority'] = false
            for (let um of menus) {
              if (um.fk_menu_no == m.no) {
                m['authority'] = true

                // this.$set(m,'authority',true)
              }
            }
          }
        }
        return configMenus
      },
      open() {
        this.show = true
      },
      close() {
        this.show = false
      },
      isShowMore(menus) {
        let len = menus.length
        if (len > 6) {
          return true
        } else {
          return false
        }
      },
      toPages(target, name, subtitle) {

        if (target) {
          console.log(target);
          this.close()
          if (target && target.indexOf('/pages/main/cash/cash') !== -1) {
            uni.reLaunch({
              url: target
            })
          } else {
            if (name && target && target.indexOf('?') !== -1 && target.indexOf('title') == -1) {
              target += `&title=${name}`
            } else if (name && target) {
              target += `?title=${name}`
            }
            if (subtitle) {
              target += `&subtitle=${subtitle}`
            }
            let pages = getCurrentPages()
            if (['出入库报表'].includes(name) || pages.length > 1) {
              uni.reLaunch({
                url: target
              })
            } else {
              uni.redirectTo({
                url: target
              })
            }
          }
        }
      },
      toMores(menu) {
        switch (menu.title) {
          case '报表管理':
            this.show = false
            uni.redirectTo({
              url: '/pages/main/report/menus'
            })
            break;
          default:
            break;
        }
      }

    },
  }
</script>

<style lang="scss" scoped>
  .feature-menu {
    // background-color: $retail-color-primary;
    // width: 100%;
    width: calc(100vw - 50rem);
    min-height: calc(100vh - 25rem); // height: 100vh;
    // width: calc(100vw - 20rem);
    // height: calc(100vh - 12rem);
    padding: 0 6rem;
    padding-bottom: 2em;
    color: #333;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--window-top) - var(--window-bottom));
  }

  .popup-title {
    height: 12rem;
    line-height: 12rem;
    border-bottom: 1px solid #e5e5e5;
    padding: 0;
    font-size: 4.8rem;
  }

  ::v-deep .u-popup__content__close.u-popup__content__close--top-right {
    right: 4rem;
    top: 3rem;
    position: absolute;
    width: 5rem;
    height: 5rem;

    .u-icon__icon.uicon-close {
      font-size: 3rem !important;
    }
  }

  .header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    vertical-algin: bottom;
    font-size: $retail-font-size-base;

    .left {
      .image {
        width: 250px;
        height: 75px;
      }
    }

    .right {
      line-height: 100%;

      .top-icon {
        width: 45px;
        height: 45px;
        margin-left: 55px;
        font-size: $retail-font-size-base;
      }
    }
  }

  .title-bar {
    padding: 0 120px;
    margin-top: 35px;

    .main-title {
      font-size: $retail-font-size-2xl;
    }

    .store-name {
      font-size: $retail-font-size-base;
    }
  }

  .menu-grid-box {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: flex-start;

    &.new {
      justify-content: space-between;

      .menu-grid-box-item {
        flex: 1;
        margin-right: 2rem;

        &:last-child {
          margin-right: 0;
        }

        &_title {
          padding: 3rem 2rem;
          font-size: 2.8rem;
          font-weight: bold;
        }

        &_container {
          display: grid;
          grid-template-rows: repeat(3, 1fr);
          grid-template-columns: repeat(2, 1fr);
          grid-row-gap: 4rem;
          background-color: #F5F5F5;
          border-radius: 1rem;
          padding: 4rem 0;

          .menu-item {
            text-align: center;

            .menu-name {
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .menu-icon {
              width: 9.6rem;
              height: 9.6rem;
            }
          }
        }
      }
    }
  }

  .menu-grid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .menu-item {
      width: 25%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      flex-direction: column;
      font-size: 20px;

      &.disabled {
        filter: grayscale(100%);
      }

      .menu-icon {
        font-size: 80px;
        width: 20rem;
        height: 20rem;
        line-height: 20rem;
        text-align: center;
      }

      .menu-name {
        font-size: $retail-font-size-lg;
      }
    }
  }

  .bottom-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: $retail-font-size-base;

    .cu-btn {
      width: 160px;
      height: 60px;
      border: 1px solid #fff;
      color: #333;
      background-color: $retail-color-primary;
      font-size: $retail-font-size-sm;
      margin-right: 45px;
    }
  }
</style>
